<template>
  <div>
    <head-top title="收藏夹"></head-top>
    <div class="goodslist">
      <ul>
        <li v-cloak v-if="goodslist.length === 0" style="width: 100%">
          <img style="width: 100%" src="../../assets/img/kong2.png" />
        </li>
        <li v-for="item in goodslist" :key="item.id">
          <van-swipe-cell>
            <van-card
              :desc="item.dateAdd"
              class="goods-card"
              :title="item.goodsName"
              :thumb="item.pic"
              @click="goDetail(item.goodsId)"
            />
            <template #right>
              <van-button
                @click="delfavor(item.goodsId)"
                square
                text="删除"
                type="danger"
                class="delete-button"
              />
            </template>
          </van-swipe-cell>
        </li>
      </ul>
    </div>
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import { getToken } from '_utils/token.js'
import { listfavor, delfavor } from '_api'
import MyTabbar from '../../components/tabbar.vue'
import HeadTop from '../../components/headtop.vue'
import { Dialog } from 'vant'
export default {
  name: 'cart',
  data () {
    return {
      goodslist: []
    }
  },
  components: { MyTabbar, HeadTop },
  created () {
    this.listfavor()
  },
  methods: {
    listfavor () {
      listfavor({
        token: getToken()
      }).then((res) => {
        if (res.data.code === 0) {
          this.goodslist = res.data.data
        }
        if (res.data.code === 700) {
          this.goodslist = []
        }
      })
    },
    delfavor (goodsId) {
      Dialog.confirm({
        message: '删这个？'
      }).then(() => {
        delfavor({
          goodsId,
          token: getToken()
        }).then((res) => {
          console.log(res)
          if (res.data.code === 0) {
            this.listfavor()
          }
        })
      })
    },
    goDetail (id) {
      this.$router.push(`/details/${id}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.item-head {
  position: fixed;
  z-index: 99999999999999;
  top: 0;
  width: 100%;
  padding: 0.15rem 0;
  box-sizing: border-box;
  height: 0.88rem;
  display: flex;
  border-bottom: 1px solid #ff344d;
  .back,
  .changestyle {
    text-align: center;
    width: 18%;
    font-size: 0.28rem;
    line-height: 0.56rem;
  }
  .gosearch {
    flex: 1;
    text-align: center;
    font-size: 0.32rem;
    line-height: 0.56rem;
    color: #000;
  }
}
.goodslist {
  padding-top: 1rem;
  position: relative;
  padding-bottom: 1rem;
  min-height: 100vh;
  box-sizing: border-box;
  background: #fafafa;
  li {
    display: flex;
    /deep/ .van-checkbox {
      margin-left: 0.15rem;
      padding-right: 0.15rem;
      .goods-card {
        padding: 0.16rem 0.32rem 0.16rem 0;
        margin: 0;
        background-color: white;
        box-sizing: border-box;
      }
      .van-checkbox__icon {
        font-size: 0.36rem;
        height: 0.36rem !important;
        width: 0.36rem !important;
      }
      .van-checkbox__icon .van-icon {
        height: 0.36rem !important;
        width: 0.36rem !important;
      }
    }
    /deep/ .van-swipe-cell {
      display: inline-block;
      flex: 1;
    }
  }
  .delete-button {
    height: 100%;
  }
  /deep/ .van-stepper.van-stepper--round {
    position: absolute;
    right: 0.2rem;
    bottom: 0.7rem;
  }
}

/deep/ .van-submit-bar {
  bottom: 0.9rem;
  border-top: 1px solid rgb(218, 217, 217);
  z-index: 9999999999999999;
  .van-submit-bar__button {
    padding: 0 0.3rem;
    width: 2.2rem;
    height: 0.8rem;
    font-size: 0.3rem;
    font-weight: 500;
    border: none;
  }
  .van-submit-bar__bar {
    height: 1rem;
    padding: 0 0.32rem;
  }
  .van-checkbox__icon {
    font-size: 0.34rem;
    padding-top: 0.05rem;
  }
  .van-submit-bar__text span {
    font-size: 0.24rem;
    padding-top: 0.05rem;
    span {
      font-size: 0.34rem;
    }
  }
  .dellall {
    position: absolute;
    z-index: 99999999;
    left: 1.8rem;
    font-size: 0.24rem;
    padding: 0.01rem 0.1rem;
    background: linear-gradient(to right, #ff6034, #ee0a24);
    color: #fff;
    border-radius: 0.08rem;
    line-height: 0.46rem;
  }
}
/deep/ .van-checkbox__label {
  margin-left: 0.16rem;
  color: #323233;
  line-height: 0.4rem;
  font-size: 0.28rem;
  padding-top: 0.05rem;
  width: 100% !important;
}
/deep/ .van-submit-bar .van-button--round {
  border-radius: 0.1rem;
}
</style>
